<template>
  <div>
    <div class="chaxun">
      <p>
        <span>查询</span>
      </p>
      <div class="sousuo">
        <span><input type="text" placeholder="根据菜品名称进行搜索" v-model="foodName"> <button @click="fun(foodName)">搜索</button>
        </span>
        <span>
          筛选：<select name="" id="">
            <option value="">炒菜</option>
            <option value="">凉菜</option>
            <option value="">主食</option>
            <option value="">汤</option>
            <option value="">饮品</option>
          </select>
        </span>
      </div>

    </div>

    <div class="bao">
      <p class="xin">
        <button @click="handleClick()" type="text" size="small">新增</button>
      </p>

      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 99%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="sortId" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="foodName" label="菜品名称" width="120">
        </el-table-column>
        <el-table-column prop="foodId" label="菜品编号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="foodMoney" label="菜品单价" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sortId" label="菜品类别" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="foodNum" label="库存" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="foodStatus" label="状态" show-overflow-tooltip>

        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick()" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.$index, scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div> -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 8]"
          :page-size="pagesize" :current-page="current" layout="total, sizes, prev, pager, next, jumper"
          :total="tableDatae.length">
        </el-pagination>
      </div>
    </div>
    <div id="xiugaikucun" v-show="bool">
      <div class="kucuntop">新增</div>
      <div class="kuncuncenter">
        <form action="/food/addonefood" method="post">
          <el-upload class="avatar-uploader" action="/food/uploadimg" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          菜品名称：<input type="text" v-model="mingcheng" /><br><br>
          菜品图片：<input type="text" v-model="imageUrl"><br><br>
          菜品库存：<input type="text" v-model="danjia"><br><br>
          菜品单价：<input type="text" v-model="leibie"><br><br>
          菜品类别：<input type="text" v-model="kucun"><br>
          <button type="submit"></button>
        </form>

        <!-- 状态：<input type="text" v-model="zhuangtai"> -->
      </div>
      <div class="kucunbottom">
        <button @click="queding()">确定</button>
        <button @click="quxiao()">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { findAllFoodByLimit ,addonefood,findByLike} from '@/apis/huanglanglang/huanglanglang.js'
export default {
  methods: {


    // handleSuccess(response, file) {
    //   console.log(response);
    // },
    // handleError(error, file, fileList) {
    //   // 图片上传失败后的处理逻辑
    // },
    // beforeUpload(file) {
    //   // 在上传之前的校验操作，比如图片类型、大小等
    //   return true; // 返回 true 允许上传，返回 false 阻止上传
    // },
    fun(foodName) {
      findByLike(foodName).then((ok) => {
        console.log(ok);
        this.tableData = ok.data.data
      })
    },
    render() {
      findAllFoodByLimit().then((ok) => {
        console.log(ok);
        this.tableDatae = ok.data.data.records
        this.tableData = ok.data.data.records.slice((this.current - 1) * this.pagesize, this.current * this.pagesize)
        console.log(this.current, this.pagesize);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val
      findAllFoodByLimit().then((ok) => {
        console.log(ok);
        this.tableData = ok.data.data.records.slice((this.current - 1) * this.pagesize, this.current * this.pagesize)
        console.log(this.current, this.pagesize);
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      findAllFoodByLimit().then((ok) => {
        console.log(ok);
        this.tableData = ok.data.data.records.slice((this.current - 1) * this.pagesize, this.current * this.pagesize)
        console.log(this.current, this.pagesize);
      });
    },

    handleAvatarSuccess(res) {
      this.imageUrl = res.data;
      this.foodPic = res.data;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick() {
      this.bool = true
    },
    del() {
      this.bool = true
    },
    quxiao() {
      this.bool = false
    },
    queding(){
      addonefood(this.mingcheng,this.imageUrl,this.leibie,this.danjia,this.kucun).then((ok) => {
        console.log(ok);
        this.render()
      })
      this.bool=false
    }
  },

  data() {
    return {
      bool: false,
      foodId: 111,
      sortId: 2,
      foodName: "",
      foodMoney: 15,
      foodStatus: 0,
      foodDiscoun: 0.8,
      foodSale: 0,
      foodSaleroom: 0,
      foodPic: "http://rujfbnnv5.hd-bkt.clouddn.com/981e59b2-9f3f-495b-965d-85f2e24c5ab3",
      foodNum: 24,
      foodDate: "2023-05-16",
      foodUnit: "盘",



      tableDatae: [{}],
      tableData: [{}],
      multipleSelection: [],
      imageUrl: "",
      // url: "http://10.48.183.40:8088/food/uploadimg",
      current: 1,
      pagesize: 5,
      mingcheng:"",
      danjia:null,
      kucun:null,
      leibie:null
    }

  },
  mounted() {

    this.render()

  },

}

</script>

<style scoped>

.xin{
  background-color: #DCDCDC;
  height: 100px;
  line-height: 100px;
  
}
.xin button{
  width: 60px;
  height: 40px;
  display: block;
  float: right;
  margin-top: 30px;
  margin-right: 30px;
}
.chaxun {
  height: 120px;
  width: 100%;
  border: 1px solid #DCDCDC;
  margin-bottom: 7px;
}

.chaxun p {
  height: 55px;
  width: 100%;
  background: #DCDCDC;
  line-height: 55px;
  display: block;
}

.chaxun p span {
  margin-left: 14px;
}

.chaxun b span {
  margin-left: 18px;
}

.chaxun b {
  font-weight: 400;
  width: 100%;
  height: 65px;
  line-height: 65px;
}

.chaxun b span input {
  width: 200px;
  height: 27px;
}

/* .el-table__body-wrapper {
  text-align: center;
} */
.el-table__header-wrapper {
  text-align: center;
}

.sousuo button {
  margin-left: 20px;

}

.sousuo input {
  margin-left: 20px;

}

.sousuo {
  height: 65px;
  line-height: 65px;
}

.block {
  float: right;
  margin-right: 50px;
}

.first {
  width: 60%;
  height: 60%;
  background-color: pink;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* .first{
  width: 55%;
  height: 45%;
  border-radius: 3px;
  border: 1px solid #000;
  background-color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.first button{
  float: right;
  border: 1px solid #000;
  font-size: 30px;
  width: 32px;
  height: 32px;
  border: none;
  margin-right: 4px;
  margin-top: 4px;
} */


#xiugaikucun {
  width: 270px;
  height: 490px;
  background-color: #eeecec;
  position: fixed;
  /* bottom: 100px;
  left: 560px; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 2px solid rgb(106, 106, 107);
  text-align: center;
}

.kucuntop {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.kucunbottom {
  display: flex;
  margin-top: 30px;
  justify-content: space-evenly;
  align-items: center;
}



.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>